.portfolio {
  display: flex;

  &__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: rem(20) 0;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    @media screen and (min-width: $mobile) {
      flex-direction: row;
      justify-content: space-between;
      gap: rem(20) rem(20);
    }
  }

  &__item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: rem(100);
    border: rem(1) solid var(--a-borderMain);

    @media screen and (min-width: $mobile) {
      width: calc(50% - rem(10));
    }

    &-info {
      &-toggle {
        z-index: 3;
        &:hover {
          svg {
            fill: var(--a-bgLight);
          }
        }
        svg {
          fill: var(--a-accentText);
        }
        &.a-button {
          position: absolute;
          bottom: rem(4);
          right: rem(4);
        }

      }
    }
  }

  &__mob-view {
    &:hover {
      svg {
        fill: var(--a-bgLight);
      }
    }
    svg {
      fill: var(--a-accentText);
    }

    &.a-button {
      position: absolute;
      top: rem(4);
      right: rem(4);
    }
  }

  &__description {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: rem(50);
    padding: rem(16) rem(50) rem(12) rem(16);
    background-color: var(--a-bgLight);

    &-head {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: rem(8);
    }

    &-title {
      margin-right: rem(12);
      color: var(--a-accentText);
    }
    &-text {
      color: var(--a-mainText);
    }
  }
}
